<!DOCTYPE html>
<!--[if IE]><![endif]-->
<!--[if IE 8 ]><html dir="{{ direction }}" lang="{{ lang }}" class="ie8"><![endif]-->
<!--[if IE 9 ]><html dir="{{ direction }}" lang="{{ lang }}" class="ie9"><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html dir="{{ direction }}" lang="{{ lang }}">
<!--<![endif]-->
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>{{ title }}</title>
<base href="{{ base }}" />
{% if description %}
<meta name="description" content="{{ description }}" />
{% endif %}
{% if keywords %}
<meta name="keywords" content="{{ keywords }}" />
{% endif %}
<script src="catalog/view/javascript/jquery/jquery-2.1.1.min.js" type="text/javascript"></script>
<link href="catalog/view/javascript/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen" />
<script src="catalog/view/javascript/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<link href="catalog/view/javascript/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link href="//fonts.googleapis.com/css?family=Open+Sans:400,400i,300,700" rel="stylesheet" type="text/css" />
<link href="catalog/view/theme/default/stylesheet/stylesheet.css" rel="stylesheet">
{% for style in styles %}
<link href="{{ style.href }}" type="text/css" rel="{{ style.rel }}" media="{{ style.media }}" />
{% endfor %}
{% for script in scripts %}
<script src="{{ script }}" type="text/javascript"></script>
{% endfor %}
<script src="catalog/view/javascript/common.js" type="text/javascript"></script>
{% for link in links %}
<link href="{{ link.href }}" rel="{{ link.rel }}" />
{% endfor %}
{% for analytic in analytics %}
{{ analytic }}
{% endfor %}
</head>
<body>
<div class="pc-header hidden-xs hidden-sm">
  <div class="header-container">
    <div class="container">
      <p class="welcome-msg col-md-3 col-lg-3">{{ onlineinfo }}</p>
      <ul class="links col-md-8 col-lg-8">
        <li>{{ search }}</li>
        {#<li class="no-input-group"><a href="{{ contact }}"><i class="fa fa-phone"></i></a> <span class="hidden-xs hidden-sm hidden-md">{{ telephone }}</span></li>#}
        <li class="dropdown no-input-group"><a href="{{ account }}" title="{{ text_account }}" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-user"></i> <span class="hidden-xs hidden-sm hidden-md">{{ text_account }}</span> <span class="caret"></span></a>
          <ul class="dropdown-menu dropdown-menu-right header-menu">
              {% if logged %}
                <li><a href="{{ account }}">{{ text_account }}</a></li>
                <li><a href="{{ order }}">{{ text_order }}</a></li>
                <li><a href="{{ transaction }}">{{ text_transaction }}</a></li>
                <li><a href="{{ download }}">{{ text_download }}</a></li>
                <li><a href="{{ logout }}">{{ text_logout }}</a></li>
              {% else %}
                <li><a href="{{ register }}">{{ text_register }}</a></li>
                <li><a href="{{ login }}">{{ text_login }}</a></li>
              {% endif %}
          </ul>
        </li>
        <li class="no-input-group"><a href="{{ wishlist }}" id="wishlist-total" title="{{ text_wishlist }}"><i class="fa fa-heart"></i> <span class="hidden-xs hidden-sm hidden-md">{{ text_wishlist }}</span></a></li>
        {#<li class="no-input-group"><a href="{{ shopping_cart }}" title="{{ text_shopping_cart }}"><i class="fa fa-shopping-cart"></i> <span class="hidden-xs hidden-sm hidden-md">{{ text_shopping_cart }}</span></a></li>#}
        {#<li class="no-input-group"><a href="{{ checkout }}" title="{{ text_checkout }}"><i class="fa fa-share"></i> <span class="hidden-xs hidden-sm hidden-md">{{ text_checkout }}</span></a></li>#}
      </ul>
      {#<div class="col-md-1 col-lg-1 currency-btn">{{ currency }}</div>#}
    </div>
  </div>
  <div class="header">
    <div class="container">
      <div class="logo-container col-sm-3">
        <div id="logo">{% if logo %}<a href="{{ home }}"><img src="{{ logo }}" title="{{ name }}" alt="{{ name }}" class="img-responsive" /></a>{% else %}
            <h1><a href="{{ home }}">{{ name }}</a></h1>
            {% endif %}</div>
      </div>
      <div class="menu-container col-sm-7">{{ menu }}</div>
      <div class="cart-container col-sm-2">{{ cart }}</div>
    </div>
  </div>
</div>
<div class="mobile-header-empty hidden-md hidden-lg"></div>
<div class="mobile-header hidden-md hidden-lg">
    <div class="header">
        <div class="col-xs-3 col-sm-3">
            <a href="javascript:;" class="category-tree a-left btn-left-menu"><i class="fa fa-bars fa-left-menu"></i></a>
        </div>
        <div class="col-xs-6 col-sm-6 text-center">
            <div id="logo">
                {% if logo %}
                <a href="{{ home }}"><img src="{{ logo }}" title="{{ name }}" alt="{{ name }}" class="img-responsive"/></a>
                {% else %}
                    <h1><a href="{{ home }}">{{ name }}</a></h1>
                {% endif %}</div>
        </div>
        <div class="col-xs-3 col-sm-3 text-right">{{ cart }}</div>
    </div>
    <div class="left-menu" id="menu" data-scroll="">
        <div class="layer-tree" onclick="hideCategory();"></div>
        <div class="left-category">
            <div class="menu-header">
                <span class="button btn-layer" onclick="hideCategory();"><i class="fa fa-close"></i></span>
            </div>
            
            <div class="category-list">
                <ul class="level1">
                    {% if logged %}
                        <li><a href="{{ logout }}">{{ text_logout }}</a></li>
                    {% else %}
                        <li><a href="{{ login }}">{{ text_login }}</a></li>
                    {% endif %}
                    {{ menuphone }}
                    <li class="footer-nav">
                        <h4>{{ text_information }}<i class="pull-right fa fa-plus"></i></h4>
                        <ul class="links">
                            {% for information in informations %}
                                <li><a href="{{ information.href }}">{{ information.title }}</a></li>
                            {% endfor %}
                            <li><a href="{{ contact }}">{{ text_contact }}</a></li>
                        </ul>
                    </li>
                    <li class="footer-nav">
                        <h4>{{ text_account }}<i class="pull-right fa fa-plus"></i></h4>
                        <ul class="links">
                            <li><a href="{{ account }}">{{ text_account }}</a></li>
                            <li><a href="{{ order }}">{{ text_order }}</a></li>
                            <li><a href="{{ wishlist }}">{{ text_wishlist }}</a></li>
                            <li><a href="{{ newsletter }}">{{ text_newsletter }}</a></li>
                        </ul>
                    </li>
                    <li class="mobile-search">
                        {{ search }}
                        {#<div class="header-search">#}
                            {#<form method="get" action="javascript:;" id="pc_search_mini_form">#}
                                {#<div class="form-search">#}
                                    {#<input type="text" class="input-text form-control" value="" name="q" id="pcSearch" placeholder="Search..." />#}
                                    {#<button class="button" title="Search" type="submit"><i class="fa fa-search"></i></button>#}
                                {#</div>#}
                            {#</form>#}
                        {#</div>#}
                    </li>
                   {#<li class="mobile-currency">{{ currency }}</li>#}
                </ul>
            </div>
        </div>
    </div>
</div>
<script language="javascript" type="text/javascript">
    $(function(){
        var mTop = $('.mobile-header').offset().top;
        var pTop = $('.pc-header').offset().top;
        $(window).scroll(function(){
            var scrolltop =  $(document).scrollTop();
            if(scrolltop > mTop){
                $('.mobile-header .header').addClass('header-fixed');
            } else {
                $('.mobile-header .header').removeClass('header-fixed');
            }
        });
        $('.category-tree').on('click',function(){
            $('.left-menu').fadeIn();
            $('html').addClass('noscroll');
            // $.smartScroll('menu','.category-list');
        });
        $('.footer-nav').on('click',function(){
            $(this).find('.links').slideToggle();
            $(this).toggleClass('active');
            if($(this).children('h4').children('i').hasClass('fa-plus')){
                $(this).children('h4').children('i').removeClass('fa-plus').addClass('fa-minus')
            }else {
                $(this).children('h4').children('i').removeClass('fa-minus').addClass('fa-plus')
            }
        })
    });
    function hideCategory() {
        $('.left-menu').fadeOut();
        $('html').removeClass('noscroll');
    }
</script>
<script>
    $('input').on('focus',function (e) {
         e.preventDefault();
        console.log('清除默认行为');
    })
</script>
